---
layout: example
categories: example/v1.0.0
version: v1.0.0
title: Markers as links
description: Click on a marker to go to a web page.
tags:
  - markers
---
<div id='map'></div>
<script>
var map = L.mapbox.map('map', 'mapbox.streets')
  .setView([39.12367, -76.81229], 9);

var myLayer = L.mapbox.featureLayer().addTo(map);

// The GeoJSON representing the two point features
var geojson = {
    type: 'FeatureCollection',
    features: [{
        type: 'Feature',
        properties: {
            title: 'Washington, D.C.',
            'marker-color': '#f86767',
            'marker-size': 'large',
            'marker-symbol': 'star',
            url: 'http://en.wikipedia.org/wiki/Washington,_D.C.'
        },
        geometry: {
            type: 'Point',
            coordinates: [-77.03201, 38.90065]
        }
    },
    {
        type: 'Feature',
        properties: {
            title: 'Baltimore, MD',
            'marker-color': '#7ec9b1',
            'marker-size': 'large',
            'marker-symbol': 'star',
            url: 'http://en.wikipedia.org/wiki/Baltimore'
        },
        geometry: {
            type: 'Point',
            coordinates: [-76.60767, 39.28755]
        }
    }]
};

// Pass features and a custom factory function to the map
myLayer.setGeoJSON(geojson);
myLayer.on('click', function(e) {
    window.open(e.layer.feature.properties.url);
});
</script>
